<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>08CSS위치표시여부</title>
	</head>

	<body>
		<h1>CSS위치표시여부</h1>
		<h2>CSS위치 지정 :position</h2>
		<p>html요소를 어떻게 배치할지를 정의</p>
		<p>위치지정은 position, top, left속성을 이용</p>
		<p>static:문서 내용의 흐름에 따라 배치(위-아래)</p>
		<div style="width: 250px; height: 150px; background: red;position: static;
		top:300px;left: 300px">static </div>
		<hr/>
		<p>absolute:조상요서(body)를 기준으로 배치</p>
		<div style="width: 250px; height: 150px; background: red;position: absolute;
		top:251px;left: 260px">absolute </div>
		<hr/>
		<p>relative:현재 위치에서 지정한 위치로 이동</p>
		<div style="width: 250px; height: 150px; background-image:url('images/3.gif');background-position:-50px -250px; 
		position: relative;top:0px;left: 100px "> </div>
		<hr/>
		<p>fixed : 지정한 위치에서 고정함</p>
		<div style="width: 250px; height: 150px; background: blue;position: fixed;
		top:720px;left: 800px">오잉 </div>
		<hr />
		<h2>요소 겹치기:z-index</h2>
		<p>absolute,relative,fixed에서만 요소를 겹칠 수 있음</p>
		<div style="width:250px;height: 150px;background: red;position: relative;
		top: 0;left: 0">#1</div>
		<div style="width:250px;height: 150px;background: green;position: relative;
		top: -50px;left: 50px; z-index:10">#2</div>
		<div style="width:250px;height: 150px;background: indigo;position: relative;
		top: -100px;left: 100px">#3</div>
		
		<hr/>
		<h2>요소 표시하기:display,visibility</h2>
		<p>display:none/block,inline-요소가 차지한 영역도 제거</p>
		<p>visible:hide/visible- 요소가 차지한 영역은 남음</p>
		<div style="width: 100px;height: 150px;background: red;border:1px solid navy; float: left; display:none">display:<br>remove</div>
		<div style="width: 100px;height: 150px;background: orange;border:1px solid navy; float: left; visibility: hidden">visibilty:hide</div>
		<div style="width: 100px;height: 150px;background: yellow;border:1px solid navy; float: left">고정</div>
		
		<hr / style="clear: both">
		
		<h2 >display 속성: 박스모델의 종류를 정의</h2>
		<p>block : 지정한 요소를 블럭요소로 보이게 함</p>
		<p>inline : 현재 요소를 인라인 요소로 보이게 함</p>
		<p>inline-block : 현재요소는 인라인 요소로 보이게 하되 블록 요소의 특성을 사용할 수 있게 함</p>
		
		<p>시간은 <span style="background:orange; display:block;">금이라구</span>, 친구!!</p>
		<div>시간은 <p style="background:red; display:inline">금이라구</p>, 친구!!</div>
		<span>아아
		<div style="background:yellow; display: inline-block">시간은 <p>금이라구</p>, 친구!!</div>
			</span>
	</body>
</html>
